<template>
	<div class="statistics" style="top:0">

		<scroll-view  class='statistics' scroll-y  @scrolltolower="lower" style="top:0">
	        <div class='data-item' @click='detail(item.days)' v-for='(item,idx) in dataList' :key='idx' >

	            <div class='data-time'>
	                <img src="../../static/images/date.png" class="">
	                <div class='date-text'>
	                    <div style='padding-top:36rpx;color:#fff' v-if="item.nianyue" >{{item.nianyue}}</div> 
	                    <div style='padding-top:36rpx;color:#fff' v-if="isStatic" >{{item.nian}}</div>
	                    <div v-if="item.tian" class='time-data'>{{item.tian}}</div>
	                    <div v-if="isStatic" class='time-data'>{{item.yue}}<text>月</text></div>

	                </div>
	            </div>
	            <div class='data-order '>
	                <div>{{pageText.corder}}：<span class='num'>{{item.coffeeOrderCount}}</span></div>
	                <div>{{pageText.gorder}}：<span class='num'>{{item.goodsOrderCount}}</span></div>
	                <div class='total-num'>{{pageText.totle}}：<span  class='num'>{{item.coffeeOrderCount + item.goodsOrderCount}}</span> </div>
	            </div>
	            <div class='data-sales '>
	                <div>{{pageText.cprice}}：<span class='num'>￥{{item.coffeeOrderPay}}</span></div>
	                <div>{{pageText.gprice}}<span class='num'>￥{{item.goodsOrderPay}}</span></div>
	                <div class='total-num'>合计：<span  class='num'>￥{{ (item.coffeeOrderPay + item.goodsOrderPay)}}</span> </div>
	            </div>
        	</div>  
	        <div class="loading" v-if="LoadIng">正在加载……</div>
	        <div class="noData" v-if="!more">没有更多了</div>
	        <div class="noData" v-if="noData">没有记录</div>
   		</scroll-view>
	</div>
</template>
<script type="text/javascript">
	import {get} from '../utils/index'
	import OrderList from '@/components/orderList'
	export default{
		data(){
			return {
				dataList:[],
				offset:0,
				more:true,
				LoadIng:true,
				noData:false,
				isStatic:true,
				pageText:{
		          'title'   : '咖缘吧运营管理系统',
		          'position': '定位中',
		          'location': '当前位置',
		          'corder'  : '咖啡订单量',
		          'gorder'  : '商品定单量',
		          'cprice'  : '咖啡销售额',
		          'gprice'  : '商品销售额',
		          'totle'   : '合计',        
		        }
			}
		},
		components:{
			OrderList,
		},
		methods:{
			async getDataList(init){
				if(init){
                    this.offset = 0;
                    this.more = true;
                }
				var user = wx.getStorageSync('userDo');
				var datas = {
					makerUserId: user.userId,
	                userTypee: user.type,
	                offset: this.offset,
	                type: 2
				}

			 	var list =  await get('coffeeOrderCountList',datas);
	            if( list.length == 0 &&　this.page == 0 ){
	                this.noData = true
	            }else{
	                this.noData = false
	            }
	            if(list.length < 10){
	                this.LoadIng = false;
	                if(this.page > 0){
	                    this.more = false
	                }
	            }
	            if(init){
	                this.dataList = list
	              
	            }else{
	                
	                this.dataList = this.salesRankList.concat(list)
	            }
			},
			lower(){
				if(!this.more){
					return
				}
				this.offset = this.offset+1
			}

		},
		mounted(){
			this.getDataList(true);
		},



	}
</script>

<style>
.statistics{
    position: absolute;
   
    left: 0;
    right: 0;
    bottom: 0rpx;
}
.data-item{
    display: flex;
    padding: 20rpx;
    margin: 0rpx 10rpx 30rpx 10rpx;
    background: #fff;
}
.data-time{
    width: 150rpx;
    height: 150rpx;
    position: relative;
    font-size: 24rpx;
     text-align: center;

}
.data-time image{
    position: absolute;
    width: 100%;
    height:100%;
    left:0;
}
.date-text{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2
}
.time-bg{
    position: absolute;
    width: 150rpx;
    height: 150rpx;
    top: 0;
    left: 0;
    z-index: 1
}
.time-data{
    font-size: 52rpx;
    color:#000;
    margin-bottom: 5rpx;
}
.data-order{
    border-right: 2rpx solid #eaeaea; 
}
.data-order,.data-sales{
    flex: 1;

    line-height: 50rpx;
    font-size: 22rpx;
    text-align: left;
    color: #999999;
}
.data-order view,.data-sales view{
    padding-left: 20rpx;
}
.data-item .num{
    color: red;
}
.total-num{
    font-weight: 600;
    margin: 0 auto;
    color: #000;
    border-top: 2rpx solid #eaeaea
}

</style>